<template>
  <div>
    <!-- <input type="text" ref="ipt"> -->
    <!-- <input type="text" ref="ipt" v-focus> -->
    <input type="text" ref="ipt" v-focus v-border>
    <textarea name="" id="" cols="30" rows="10" v-focus v-border></textarea>

    <!-- 获取焦点：页面上，只应该有一个元素获取到焦点 -->
    <p v-color="color1">我是普通文本 - 橘色</p>
    <h2 v-color="color2">我是标题 - 天空蓝</h2>
    <button @click="changeColor1">点击修改color1 </button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      color1:'orange',
      color2:'skyblue'
    }
  },
  methods:{
    changeColor1(){
      this.color1 = 'red'
    }
  },
  // 生命周期： Vue实例从创建到销毁经过的各个过程~~ 
  // 生命周期函数（钩子函数）
  // 组件的  创建 / 挂载 / 更新 / 销毁

  // moutetd: 挂载的意思 组件dom元素已经渲染好了，挂载到页面上了，这个时候可以获取dom元素
  mounted(){
    // this.$refs.ipt.focus()
  },


  // 局部注册，自定义指令
  directives: {
    // v-focus  定义指令名，不需要加v-, 使用的时候加上就行
    focus: {
      // inserted ==> 当指令所在的元素节点, 被插入挂载到页面上的时候，（dom元素可以获取）触发这个函数
      inserted(el){
        // 自己定义一些想要实现的逻辑
        console.log(el)
        el.focus()
      }
    }
  }

  // 用自定义指令来实现 v-focus  

  // 定义一个v-color指令，给某个元素加了这个指令，就让它有border边框颜色 

}
</script>

<style>

</style>